<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Example: plural with message functions</title>
    <script src="../../../node_modules/vue/dist/vue.global.js"></script>
    <script src="../../../packages/vue-i18n/dist/vue-i18n.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>Car:</h2>
      <p class="p1">{{ t('car', 1) }}</p>
      <p class="p2">{{ t('car', 2) }}</p>
      <h2>Apple:</h2>
      <p class="p3">{{ t('apple', 0) }}</p>
      <p class="p4">{{ t('apple', 1) }}</p>
      <p class="p5">{{ t('apple', { count: 10 }, 10) }}</p>
      <p class="p6">{{ t('apple', 10) }}</p>
      <h2>Banana:</h2>
      <p class="p7">{{ t('banana', { n: 1 }, 1) }}</p>
      <p class="p8">{{ t('banana', 1) }}</p>
      <p class="p9">{{ t('banana', { n: 'too many' }, 100) }}</p>
    </div>
    <script>
      const { createApp } = Vue
      const { createI18n, useI18n } = VueI18n

      const i18n = createI18n({
        locale: 'en',
        messages: {
          en: {
            car: ({ plural }) => {
              // 'car | cars'
              return plural(['car', 'cars'])
            },
            apple: ({ plural, named }) => {
              // 'no apples | one apple | {count} apples'
              return plural(['no apples', 'one apple', `${named('count')} apples`])
            },
            banana: ({ plural, named }) => {
              const n = named('n')
              // 'no bananas | {n} banana | {n} bananas'
              return plural(['no bananas', `${n} banana`, `${n} bananas`])
            }
          }
        }
      })

      const app = createApp({
        setup() {
          const { t } = useI18n()

          // Something to do ...
          //

          return { t }
        }
      })
      app.use(i18n)
      app.mount('#app')
    </script>
  </body>
</html>
